<template>
  <div id="app">
    <div class="login">
        <div>
            <img src="" alt="头像还没放">
        </div>
        <div @click="login()">未登录</div>
    </div>
    <div>
        <van-cell title="阅读记录" is-link to="/vant/mobile.html" />
    </div>
    <div>
      <van-cell title="书架" is-link to="index" />
      <van-cell title="我的评论" is-link to="index" />
      <van-cell title="下载管理" is-link to="index" />
    </div>
    <div>
        <van-cell title="皮肤" is-link to="index" />
        <van-cell title="浏览设置" is-link to="index" />
        <van-cell title="退出登录" is-link to="index" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Cell, CellGroup } from 'vant'

Vue.use(Cell)
Vue.use(CellGroup)
export default {
    
    methods: {
        login() {
            location.href = "/login"
        }
    }
}
</script>

<style lang="scss" scoped>
#app {
    background-color: rgb(231, 228, 228);
  .login {
    width: 100%;
    height: 160px;
    background-color: rgb(240, 225, 158);
    padding-top: 30px;
    padding-left: 30px;
    box-sizing: border-box;
    >div{
        float: left;
    }
    div:hover{
            cursor: pointer;
        }
    >:first-child{
        background-color: #fff;
        border-radius: 50%;
        width: 100px;
        height: 100px;
    }
    >:nth-child(2){
        margin-left: 20px;
        font-size: 28px;
        margin-top: 30px;
        // background-color: #fff;
    }
  }
  >:not(.login){
        margin-top: 10px;
    }
}
</style>